<template>
    <van-nav-bar class="navBar" title="购物车" left-text="返回" left-arrow @click-left="$router.back()" />

  <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="getList">
    <div v-for="item in list" :key="item.id" class="row">
      <van-checkbox v-model="item.selected" class="checkbox"></van-checkbox>
      <div class="card">
        <van-card :price="item.goods.price" :desc="item.goods.text" :title="item.goods.name" :thumb="item.goods.image" :origin-price="item.goods.originPrice">
     
          <!-- 数量的插槽 -->
          <template #num>

            <van-stepper v-model="item.cont" />
          </template>
          <template #tags>
            <van-tag plain type="primary">酒水</van-tag>
          </template>
        </van-card>
      </div>
    </div>
  </van-list>
  <van-submit-bar :price="totalFee" button-text="提交订单" @submit="onSubmit">
    <van-checkbox v-model="allSelected">全选</van-checkbox>
    <template #tip>
      <div class="station">
        <!-- <div v-if="$store.state.station">{{ $store.state.station.name }}</div> -->
        <div v-if="station">{{ station.name }}</div>
        <div v-else>请设置自提点</div>

        <!-- <router-link to="/station">{{ $store.state.station ? '修改自提点' : '设置自提点' }}</router-link> -->
        <router-link to="/pickupsite">{{ station ? '修改自提点' : '设置自提点' }}</router-link>
      </div>
    </template>
  </van-submit-bar>
  <div style="height: 200px;"></div>
</template>

<script>
import { ConfigProvider } from 'vant';
import { mapState } from 'vuex';
import axios from 'axios';
import _ from 'lodash';
import { showDialog } from 'vant'; // 引入弹窗的方法
export default {
  data() {
    return {
      list: [], // 列表数据
      loading: false, // 数据加载中
      finished: false, // 是否加载完成
      pageNo: 0, // 页数
      pageSize: 20, // 页距
    }
  },
  created() {
    this.getList();
    // 注册一个中央消息总线 （相当于你去电信公司办了一张电话卡，有一个电话号码）
    // 使用on注册事件，第一个参数就是事件名称，第二个参数就是接收到事件后的回调函数
    this.$store.state.$bus.on('refreshCartList', this.refreshList);
  },
  computed: {
    // this.$store.state.station 使用了 mapState 之后直接可以写成 this.station
    ...mapState(['station']), // 将全局的station通过计算属性变为自己的属性
    allSelected: { // 全选，因为要双向绑定，所以需要设置set属性
      get() {
        // 每一项都选择，则为全选，只要有一项没有选择，则为非全选
        return _.every(this.list, o=>o.selected);
      },
      set(value) {
        this.list.forEach(o=>o.selected = value);
      },
    },
    // 总价格
    totalFee() { // 单位：分
      // _.filter(this.list, o=>o.selected) 过滤出选择项
      // .map(o=>o.cont * o.goods.price) 计算出选择项的每一项的需要的钱
      // _.sum(...) 对所有的选择的项的钱就和
      // *100 因为组件需要传入分
      return _.sum(_.filter(this.list, o=>o.selected).map(o=>o.cont * o.goods.price)) * 100;
    }
  },
  methods: {
    async getList() {
      this.loading = true;
      const res = await axios.post('http://localhost:6001/list/cart', {
        // $timeout: 3000,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
      });
      const data = res.data;
      this.loading = false;
      this.pageNo++;

      this.list = [...this.list, ...data.result.list.map(o=>({ ...o, selected: false }))];
      this.finished = data.result.list.length < this.pageSize; // 如果拉取的数据不够一页的数据，说明没有更多数据了
    },
    refreshList() { // 刷新函数
      // list 和 pageNo都需要重置
      this.list = [];
      this.pageNo = 0;
      this.getList();
    },
    async onSubmit() { // 提交订单
      if (!this.station) {
        return showDialog({ message: '请选择自提点' });
      }
      if (0 === this.list.filter(o=>o.selected).length) {
        return showDialog({ message: '请选择购物车' });
      }
      const params = { // 提交的参数
        stationId: this.station.id, // 自提点的id
        fee: this.totalFee / 100, // 总费用
        list: this.list.filter(o=>o.selected).map(item=>({
          goodsId: item.goodsId, // 每一个购物车的商品对应的id
          cont: item.cont, // 每一个购物车的数量
        }))
      };
      const res = await axios.post('http://localhost:6001/create/order', params);
      const data = res.data;
      if (!data.success) {
        return showDialog({ message: data.message });
      }
      this.$store.state.$bus.emit('refreshOrderList')
      showDialog({ message: '提交订单成功' });
    }
  }
}
</script>

<!-- <style>
.van-submit-bar {
  bottom: 50px !important;
}
</style> -->


<style scoped>
/* .navBar{
  position: fixed;
  top: 0;
  z-index: 999;
} */

.row {
  display: flex;
  flex-direction: row;
  width: 100%;
  background-color: #f7f8fa;
  margin: 10px 0;
}
.checkbox {
  margin: 0 4px;
}
.card {
  flex: 1; /* 剩下的布满 */
}
:global(.van-submit-bar) { /* 如果要在scoped中定义全局的class，需要使用:global(.xx)的格式 */
  bottom: 50px !important;
}
.station {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
</style>